<template>
  <div>
    <h1>主页</h1>

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="width: 100%; height: 200px"
    >
      <van-swipe-item v-for="item in imgs" :key="item.id"
        ><img :src="item.image_url" alt="" style="width: 100%; height: 100%"
      /></van-swipe-item>
    </van-swipe>

    <van-grid :column-num="5">
      <van-grid-item
        :icon="item.icon_url"
        :text="item.name"
        v-for="item in lists"
        :key="item.id"
      />
    </van-grid>

    <div id="dv">
      <list v-for="item in lis" :key="item.id" :item="item"></list>
    </div>
  </div>
</template>

<script>
import list from "../components/list";
export default {
  data() {
    return {
      imgs: "",
      lists: "",
      lis: "",
    };
  },
  mounted() {
    this.getImgs();
    this.getlists();
    this.getlis();
  },
  methods: {
    getImgs() {
      this.$http("http://shop.bufantec.com/bufan/index/index", "get").then(
        (res) => {
          this.imgs = res.data.banner;
        }
      );
    },
    getlists() {
      this.$http("http://shop.bufantec.com/bufan/index/index", "get").then(
        (res) => {
          this.lists = res.data.channel;
        }
      );
    },
    getlis() {
      this.$http("http://shop.bufantec.com/bufan/index/index", "get").then(
        (res) => {
          console.log(res.data.brandList);
          this.lis = res.data.brandList;
        }
      );
    },
  },
  components: {
    list,
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
#dv {
  width: 100%;
  height: 260px;
  display: flex;
  box-sizing: border-box;
  padding: 0 5px;
  flex-wrap: wrap;
}
</style>
